<!DOCTYPE html>
<html ng-app="ionic">
  <head>
    <script src="../../dist/js/ionic.bundle.js"></script>
    <meta charset="utf-8">
    <title>Tabs: Android Colors</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <link href="../../dist/css/ionic.css" rel="stylesheet">
    <style>
      .tabs, .view{
        position:relative !important;
      }
      .spacer{
        margin-top: 100px;
      }
    </style>
  </head>
  <body>

    <header class="bar bar-header bar-positive has-tabs-top">
      <h1 class="title">Android Tab Bars</h1>
    </header>

    <div class="tabs-positive tabs-top tabs-striped">
      <nav class="tabs">
        <a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
        <a class="tab-item"><i class="icon ion-locked"></i>Security</a>
        <a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
        <a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
      </nav>
    </div>

    <div class="tabs-light tabs-top  tabs-striped">
      <nav class="tabs">
        <a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
        <a class="tab-item"><i class="icon ion-locked"></i>Security</a>
        <a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
        <a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
      </nav>
    </div>
    <div class="tabs-stable tabs-top tabs-background-balanced tabs-striped">
      <nav class="tabs">
        <a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
        <a class="tab-item"><i class="icon ion-locked"></i>Security</a>
        <a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
        <a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
      </nav>
    </div>
    <div class="tabs-positive tabs-top tabs-background-assertive tabs-striped">
      <nav class="tabs">
        <a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
        <a class="tab-item"><i class="icon ion-locked"></i>Security</a>
        <a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
        <a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
      </nav>
    </div>
    <div class="tabs-calm tabs-top tabs-striped">
      <nav class="tabs">
        <a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
        <a class="tab-item"><i class="icon ion-locked"></i>Security</a>
        <a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
        <a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
      </nav>
    </div>
    <div class="tabs-assertive tabs-top tabs-background-dark tabs-striped">
      <nav class="tabs">
        <a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
        <a class="tab-item"><i class="icon ion-locked"></i>Security</a>
        <a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
        <a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
      </nav>
    </div>
    <div class="tabs-balanced tabs-top tabs-background-calm tabs-striped">
      <nav class="tabs">
        <a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
        <a class="tab-item"><i class="icon ion-locked"></i>Security</a>
        <a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
        <a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
      </nav>
    </div>
    <div class="tabs-energized tabs-top tabs-background-royal tabs-striped">
      <nav class="tabs">
        <a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
        <a class="tab-item"><i class="icon ion-locked"></i>Security</a>
        <a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
        <a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
      </nav>
    </div>
    <div class="tabs-royal tabs-top tabs-background-dark tabs-striped">
      <nav class="tabs">
        <a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
        <a class="tab-item"><i class="icon ion-locked"></i>Security</a>
        <a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
        <a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
      </nav>
    </div>
    <div class="tabs-dark tabs-top tabs-striped">
      <nav class="tabs">
        <a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
        <a class="tab-item"><i class="icon ion-locked"></i>Security</a>
        <a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
        <a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
      </nav>
    </div>



    <div class="view tabs-light tabs-striped spacer">
      <nav class="tabs ">
        <a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
        <a class="tab-item"><i class="icon ion-locked"></i>Security</a>
        <a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
        <a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
      </nav>
    </div>
    <div class="view tabs-striped">
      <nav class="tabs ">
        <a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
        <a class="tab-item"><i class="icon ion-locked"></i>Security</a>
        <a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
        <a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
      </nav>
    </div>
    <div class="view tabs-stable tabs-background-balanced tabs-striped">
      <nav class="tabs">
        <a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
        <a class="tab-item"><i class="icon ion-locked"></i>Security</a>
        <a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
        <a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
      </nav>
    </div>
    <div class="view tabs-color-positive tabs-background-dark tabs-striped">
      <nav class="tabs">
        <a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
        <a class="tab-item"><i class="icon ion-locked"></i>Security</a>
        <a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
        <a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
      </nav>
    </div>
    <div class="view tabs-calm tabs-background-royal tabs-striped">
      <nav class="tabs">
        <a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
        <a class="tab-item"><i class="icon ion-locked"></i>Security</a>
        <a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
        <a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
      </nav>
    </div>
    <div class="view tabs-assertive tabs-background-energized tabs-striped">
      <nav class="tabs">
        <a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
        <a class="tab-item"><i class="icon ion-locked"></i>Security</a>
        <a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
        <a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
      </nav>
    </div>
    <div class="view tabs-color-balanced tabs-background-positive tabs-striped">
      <nav class="tabs">
        <a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
        <a class="tab-item"><i class="icon ion-locked"></i>Security</a>
        <a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
        <a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
      </nav>
    </div>
    <div class="view tabs-energized tabs-striped">
      <nav class="tabs">
        <a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
        <a class="tab-item"><i class="icon ion-locked"></i>Security</a>
        <a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
        <a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
      </nav>
    </div>
    <div class="view tabs-royal tabs-background-assertive tabs-striped">
      <nav class="tabs">
        <a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
        <a class="tab-item"><i class="icon ion-locked"></i>Security</a>
        <a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
        <a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
      </nav>
    </div>
    <div class="view tabs-dark tabs-striped">
      <nav class="tabs">
        <a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
        <a class="tab-item"><i class="icon ion-locked"></i>Security</a>
        <a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
        <a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
      </nav>
    </div>
  </body>
</html>
